<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{change?'修改班次':'新增班次'}}</block>
		</cu-custom>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>班次名称
			</view>
			<view class="action">
				<input placeholder="请输入班次名称" v-model="sname" name="sname"></input>
			</view>
		</view>
		<view class="cu-bar">
			<view class="action">
				设置班次一天内上班次数
			</view>
		</view>
		<radio-group class="cu-bar bg-white" @change="radioChange">
			<view class="action">
				<label class="radio">
					<radio value="0" :checked="index==0" />1天1班</label>
			</view>
			<view class="action">
				<label class="radio">
					<radio value="1" :checked="index==1" />1天2班</label>
			</view>
			<view class="action">
				<label class="radio">
					<radio value="2" :checked="index==2" />1天3班</label>
			</view>
		</radio-group>

		<block v-if="index>=0">
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					上班
				</view>
				<picker fields="month" mode="time" id="stime" :value="stime" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{stime}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					下班
				</view>
				<picker fields="month" mode="time" id="etime" :value="etime" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{etime}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
			<view v-if="index==0" class="cu-form-group margin-top">
				<view class="title">开启午休时间</view>
				<switch class='blue' @change="noonSwitch" :class="noon?'checked':''" :checked="noon?true:false"></switch>
			</view>
			<block v-if="noon&& index==0">
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						午休开始
					</view>
					<picker fields="month" mode="time" id="resttimebegin" :start="stime" :value="resttimebegin" @change="bindDateChange">
						<view class="action">
							<text class="padding">{{resttimebegin}}</text><text class="cuIcon-right text-gray"></text>
						</view>
					</picker>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action">
						午休结束
					</view>
					<picker fields="month" mode="time" id="resttimeend" :end="etime" :value="resttimeend" @change="bindDateChange">
						<view class="action">
							<text class="padding">{{resttimeend}}</text><text class="cuIcon-right text-gray"></text>
						</view>
					</picker>
				</view>
			</block>
		</block>
		<block v-if="index>=1">
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					上班
				</view>
				<picker fields="month" mode="time" id="stime2" :start="etime" :value="stime2" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{stime2}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					下班
				</view>
				<picker fields="month" mode="time" id="etime2" :value="etime" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{etime2}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
		</block>
		<block v-if="index>=2">
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					上班
				</view>
				<picker fields="month" mode="time" id="stime3" :start="etime2" :value="stime3" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{stime3}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					下班
				</view>
				<picker fields="month" mode="time" id="etime3" :value="etime3" @change="bindDateChange">
					<view class="action">
						<text class="padding">{{etime3}}</text><text class="cuIcon-right text-gray"></text>
					</view>
				</picker>
			</view>
		</block>
		
		<button v-if="change" @click="deleteShifts" type="" class="cu-bar center bg-white margin-top">
			<view class="action">
				删除班次
			</view>
		</button>
		<view style="height: 160upx"></view>
		<view class="bottom response">
			<button @click="saveShifts" :disabled="loadding" style="background-color: #5599FF;" :loading="loadding" type="primary">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		formateDate
	} from "@/common/utils.js"

	export default {
		data() {
			return {
				index: 0,
				loadding: false,
				sname:'',
				stime: '09:00',
				etime: '18:00',
				noon: false,
				resttimebegin: '12:00',
				resttimeend: '14:00',
				stime2: '请选择',
				etime2: '请选择',
				stime3: '请选择',
				etime3: '请选择',
				change:false,
				shiftsId:''
			}
		},
		onLoad() {
			let res = this.$route.query.res
			if(typeof(res)!='undefined'){
				this.change = true
				let data = JSON.parse(res)
				// console.log(data)
				this.index = data.timeintervalcount-1
				this.sname = data.sname
				this.shiftsId = data.id
				if(this.index>=0){
					this.stime = data.stime
					this.etime = data.etime
					if(data.resttimebegin!=''&&data.resttimeend!=''){
						this.noon = true
						this.resttimebegin = data.resttimebegin
						this.resttimeend = data.resttimeend
					}
				}
				if(this.index>=1){
					this.stime2 = data.stime2
					this.etime2 = data.etime2
				}
				if(this.index>=2){
					this.stime3 = data.stime3
					this.etime3 = data.etime3
				}
				console.log(data)
			}
		},
		methods: {
			radioChange: function(e) {
				let value = e.target.value
				this.index = value
			},
			bindDateChange: function(e) {
				let id = e.currentTarget.id
				let time = e.target.value
				this[id] = time
			},
			noonSwitch(e) {
				this.noon = e.detail.value
			},
			deleteShifts(){
				uni.showLoading({
					title:'删除中...'
				})
				uni.request({
					url: this.$constant.BASEURL + this.$constant.DELETE_SHIFTS,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode,
						id:this.shiftsId,
					},
					complete() {
						uni.hideLoading()
					},
					success: (res) => {
						// console.log(res.data)
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});
			},
			saveShifts(){
				//表示一天一班
				if(this.sname ==''){
					uni.showToast({
						title:'请输入班次名称',
						icon:'none'
					})
					return
				}
				if(this.index>=1){
					if(this.stime2 =='请选择'){
						uni.showToast({
							title:'请选择上班时间2',
							icon:'none'
						})
						return 
					}	
					if(this.etime2 =='请选择'){
						uni.showToast({
							title:'请选择下班时间2',
							icon:'none'
						})
						return
					}	
				}
				if(this.index>=2){
					if(this.stime3 =='请选择'){
						uni.showToast({
							title:'请选择上班时间3',
							icon:'none'
						})
						return
					}	
					if(this.etime3 =='请选择'){
						uni.showToast({
							title:'请选择下班时间3',
							icon:'none'
						})
						return
					}	
				}
				//计算出勤工时
				this.loadding = true
				let attworkinghours = 0
				let params = {
					username: getApp().globalData.username,
					token: getApp().globalData.token,
					unitno: getApp().globalData.orgcode,
					sname:this.sname,
					timeintervalcount:this.index+1,
					resttimebegin:'',
					resttimeend:''
				}
				if(this.change){
					params.id = this.shiftsId
				}
				if(this.index==0){
					attworkinghours = this.countTime(this.stime,this.etime)
					if(attworkinghours<0){
						attworkinghours+=24
					}
					params.stime = this.stime,
					params.etime = this.etime
					if(this.noon){
						let noontime = this.countTime(this.resttimebegin,this.resttimeend)
						attworkinghours-=noontime
						params.resttimebegin = this.resttimebegin
						params.resttimeend = this.resttimeend
					}else{
						params.resttimebegin = this.stime
						params.resttimeend = this.stime
					}
				}else if(this.index==1){
					params.stime = this.stime
					params.etime = this.etime
					params.stime2 = this.stime2
					params.etime2 = this.etime2
					let firsttime =  this.countTime(this.stime,this.etime)
					let secondtime =  this.countTime(this.stime2,this.etime2)
					attworkinghours = firsttime + secondtime
					if(secondtime<0){
						attworkinghours+=24
					}
				}
				else if(this.index==2){
					params.stime = this.stime
					params.etime = this.etime
					params.stime2 = this.stime2
					params.etime2 = this.etime2
					params.stime3 = this.stime3
					params.etime3 = this.etime3
					let firsttime =  this.countTime(this.stime,this.etime)
					let secondtime =  this.countTime(this.stime2,this.etime2)
					let thirdTime =  this.countTime(this.stime3,this.etime3)
					attworkinghours = firsttime + secondtime + thirdTime
					if(thirdTime<0){
						attworkinghours+=24
					}
				}
				params.attworkinghours = attworkinghours
				console.log(params)
				this.requestSave(params)
			},
			requestSave(params){
				uni.request({
					url: this.$constant.BASEURL + this.$constant.ADD_SHIFTS,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: params,
					success: (res) => {
						this.loadding = false
						console.log(res.data)
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});
			},
			countTime(stime,etime){
				let date = '2020-01-01 '
				let sdate = new Date(date+stime)
				let edate = new Date(date+etime)
				return (edate.getTime()-sdate.getTime())/1000/(60*60)
			}
		}
	}
</script>

<style>
	.bottom {
		background-color: #FFFFFF;
		padding: 20upx;
		position: fixed;
		bottom: 0;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
